<script setup lang="ts">
import { reactive } from 'vue';
// 注册验证规则
import { registerRules } from '../utils/rules';
// hook
import { useUserStoreHook } from '@/store/modules/user';
// 过渡动画
import Motion from '../utils/motion';
// 中英文切换
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 表单数据
const loginForm = reactive({
	phone: '',
	captcha: ''
});
</script>
<template>
	<el-form :model="loginForm" :rules="registerRules" status-icon ref="ruleFormRef">
		<!-- 二维码 -->
		<Motion :delay="100">
			<el-form-item class="flex-c">
				<div class="flex-c w-full">
					<img src="@/assets/img/login-qrcode.png" />
				</div>
			</el-form-item>
		</Motion>

		<!-- 扫码后点击'确认'，即可完成登录 -->
		<Motion :delay="150">
			<el-form-item class="button-list">
				<el-divider>{{ t('login.tip') }}</el-divider>
			</el-form-item>
		</Motion>

		<!-- 返回按钮 -->
		<Motion :delay="200">
			<el-form-item>
				<el-button class="w-full" @click="useUserStoreHook().SET_CURRENTPAGE(0)">
					{{ t('login.back') }}
				</el-button>
			</el-form-item>
		</Motion>
	</el-form>
</template>
